<template>
  <div class="noteDetail" v-if="note">
    <header>
      <div class="left">
        <div class="back">
          <van-icon name="arrow-left" size="22" color="black" @click="back" />
        </div>
        <div class="author">
          <div class="avatar">
            <van-image
              width="30"
              height="30"
              lazy-load
              round
              :src="note.user.avatar"
            />
          </div>
          <div class="username">{{ note.user.username }}</div>
        </div>
      </div>
      <div class="right">
        <div v-if="!isFollow" class="follow" @click.stop="follow">
          +&nbsp;关注
        </div>
        <div class="share" @click.stop="share">
          <svg
            t="1677737888219"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="11140"
            width="20"
            height="20"
          >
            <path
              d="M981.333333 439.466667c-25.6 0-42.666667 17.066667-42.666666 42.666666V896c0 21.333333-17.066667 42.666667-42.666667 42.666667H128c-25.6 0-42.666667-17.066667-42.666667-42.666667V132.266667c0-21.333333 17.066667-42.666667 42.666667-42.666667h396.8c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666666H128c-72.533333 0-128 55.466667-128 128V896c0 68.266667 55.466667 128 128 128h768c72.533333 0 128-55.466667 128-128v-418.133333c0-21.333333-17.066667-38.4-42.666667-38.4zM896 0h-174.933333c-25.6 0-42.666667 17.066667-42.666667 42.666667s17.066667 42.666667 42.666667 42.666666h157.866666L371.2 588.8c-17.066667 17.066667-17.066667 42.666667 0 59.733333 8.533333 8.533333 21.333333 12.8 29.866667 12.8 12.8 0 21.333333-4.266667 29.866666-12.8L938.666667 145.066667v157.866666c0 25.6 17.066667 42.666667 42.666666 42.666667s42.666667-17.066667 42.666667-42.666667V128c0-72.533333-55.466667-128-128-128z"
              fill="#000"
              p-id="11141"
            ></path>
          </svg>
        </div>
      </div>
    </header>
    <div class="likeheader"></div>
    <div class="index">
      <div class="images" v-if="note.images">
        <div class="image" v-for="(image, index) in note.images" :key="index">
          <van-image
            width="110"
            height="110"
            fit="cover"
            lazy-load
            :src="image"
            radius="5px"
          />
        </div>
      </div>
      <div class="title" v-if="note.title">{{ note.title }}</div>
      <div class="content" v-if="note.content">
        {{ note.content }}
      </div>
      <div class="topics" v-if="note.topics">#{{ note.topics[0].name }}</div>
      <div class="article" v-if="note.article.id != 0">
        <div class="left">
          <van-image
            width="100%"
            height="auto"
            lazy-load
            :src="note.article.cover"
            radius="10px 0 0 10px"
          />
          <div class="countBox">
            <div>
              <svg
                t="1677140094156"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5302"
                width="16"
                height="16"
              >
                <path
                  d="M515.2 224c-307.2 0-492.8 313.6-492.8 313.6s214.4 304 492.8 304 492.8-304 492.8-304S822.4 224 515.2 224zM832 652.8c-102.4 86.4-211.2 140.8-320 140.8s-217.6-51.2-320-140.8c-35.2-32-70.4-64-99.2-99.2-6.4-6.4-9.6-12.8-16-19.2 3.2-6.4 9.6-12.8 12.8-19.2 25.6-35.2 57.6-70.4 92.8-102.4 99.2-89.6 208-144 329.6-144s230.4 54.4 329.6 144c35.2 32 64 67.2 92.8 102.4 3.2 6.4 9.6 12.8 12.8 19.2-3.2 6.4-9.6 12.8-16 19.2C902.4 585.6 870.4 620.8 832 652.8z"
                  p-id="5303"
                  fill="#ffffff"
                ></path>
                <path
                  d="M512 345.6c-96 0-169.6 76.8-169.6 169.6 0 96 76.8 169.6 169.6 169.6 96 0 169.6-76.8 169.6-169.6C681.6 422.4 604.8 345.6 512 345.6zM512 640c-67.2 0-121.6-54.4-121.6-121.6 0-67.2 54.4-121.6 121.6-121.6 67.2 0 121.6 54.4 121.6 121.6C633.6 582.4 579.2 640 512 640z"
                  p-id="5304"
                  fill="#ffffff"
                ></path>
              </svg>
              <span>{{ note.article.count.count_view | formatter }}</span>
            </div>
            <div>
              <svg
                t="1677140255784"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="11573"
                width="16"
                height="16"
              >
                <path
                  d="M779.2 881.6h-44.8c-17.6 0-32-14.4-32-32s14.4-32 32-32h44.8c4.8 0 51.2-1.6 62.4-28.8 14.4-36.8 72-264 92.8-347.2 3.2-12.8 11.2-49.6 0-62.4-4.8-4.8-14.4-6.4-20.8-6.4H649.6c-17.6 0-32-14.4-32-32s14.4-32 32-32H912c38.4 0 60.8 16 70.4 30.4 30.4 36.8 17.6 91.2 12.8 116.8v1.6c-8 32-76.8 307.2-94.4 355.2-19.2 51.2-76.8 68.8-121.6 68.8z"
                  fill="#ffffff"
                  p-id="11574"
                ></path>
                <path
                  d="M331.2 480c-12.8 0-24-8-30.4-20.8-6.4-16 1.6-35.2 17.6-41.6 24-9.6 44.8-27.2 57.6-49.6l8-14.4c35.2-62.4 57.6-134.4 67.2-214.4 1.6-11.2 4.8-20.8 6.4-27.2 9.6-27.2 46.4-56 92.8-59.2 30.4-1.6 86.4 8 126.4 92.8 64 136 0 212.8-3.2 216-11.2 12.8-32 14.4-44.8 3.2-12.8-11.2-14.4-32-3.2-44.8 1.6-1.6 38.4-51.2-6.4-147.2-11.2-24-32-54.4-60.8-56-20.8-1.6-36.8 11.2-40 17.6 0 0-1.6 4.8-1.6 14.4-9.6 88-35.2 168-75.2 238.4l-8 12.8c-19.2 35.2-51.2 64-89.6 78.4-4.8 1.6-8 1.6-12.8 1.6zM777.6 881.6H500.8c-20.8 0-40-3.2-59.2-11.2-52.8-19.2-128-48-128-48l22.4-59.2 128 48c11.2 4.8 24 6.4 36.8 6.4h276.8c17.6 0 32 14.4 32 32s-14.4 32-32 32z"
                  fill="#ffffff"
                  p-id="11575"
                ></path>
                <path
                  d="M294.4 902.4H97.6c-30.4 0-54.4-25.6-54.4-56V393.6c0-27.2 20.8-65.6 54.4-65.6h196.8c20.8 0 46.4 17.6 46.4 65.6v452.8c0 41.6-24 56-46.4 56z m-187.2-64h169.6V393.6v-1.6H107.2V838.4z"
                  fill="#ffffff"
                  p-id="11576"
                ></path>
              </svg>
              <span>
                {{ note.article.count.count_like | formatter }}
              </span>
            </div>
            <div>
              {{ note.article.duration | time }}
            </div>
          </div>
        </div>
        <div class="right">
          <div class="r-title">{{ note.article.title }}</div>
          <div class="username">
            @{{ note.article.author.userinfo.username }}
          </div>
        </div>
      </div>
      <div class="sub">
        {{ note.addtime | timestampToTime }}&nbsp;·&nbsp;{{ note.ip_location }}
      </div>
    </div>
    <div class="commectBox">
      <div class="total">共 {{ total }} 条评论</div>
      <div class="doComment">
        <div class="avatar">
          <van-image
            width="36"
            height="36"
            lazy-load
            round
            src="https://cs.xinpianchang.com/passport/default.jpg"
          />
        </div>
        <div class="fakeInput" @click.stop="show = true">
          <span>说说你的看法吧~</span>
        </div>
      </div>
      <div class="comments" v-if="comments">
        <CommentItem
          v-for="(comment, index) in comments"
          :key="index"
          :comment="comment"
        />
      </div>
    </div>
    <div class="likebottom"></div>
    <div class="bottom">
      <div class="fakeInput" @click.stop="show = true">
        <span>说说你的看法吧~</span>
      </div>
      <div class="right">
        <div class="doLike">
          <svg
            v-if="!isLike"
            t="1677204147051"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3623"
            width="28"
            height="28"
          >
            <path
              d="M759.1936 826.9824c-20.0704 21.9136-43.52 32.5632-71.4752 32.5632L420.2496 859.5456c-32.768 0-59.392-27.8528-59.392-62.0544L360.8576 468.2752c28.2624-29.9008 103.936-118.4768 147.0464-250.88 6.7584-20.7872 21.8112-55.5008 47.3088-52.8384 19.8656 1.9456 40.6528 24.4736 43.7248 47.104 1.8432 16.896-14.4384 115.5072-40.5504 167.6288L535.552 424.8576l241.152 0c32.768 0 59.392 27.8528 59.4944 63.2832C838.8608 556.2368 829.952 749.9776 759.1936 826.9824zM296.448 797.3888c0 14.336-23.7568 31.0272-54.4768 31.0272-30.72 0-54.4768-16.6912-54.4768-31.0272L187.4944 486.912c0-14.336 23.7568-31.0272 54.4768-31.0272 30.72 0 54.4768 16.6912 54.4768 31.0272L296.448 797.3888zM895.6928 486.912c0-68.5056-53.3504-124.2112-118.8864-124.2112L629.1456 362.7008c19.6608-59.6992 31.9488-134.4512 28.5696-159.6416-7.0656-51.6096-49.664-95.6416-96.9728-100.2496-22.6304-2.1504-79.1552 2.56-109.1584 94.72-37.9904 116.736-103.8336 195.8912-128.9216 223.1296-20.48-16.6912-48.8448-26.8288-80.6912-26.8288-63.8976 0-113.9712 40.96-113.9712 93.184l0 310.4768c0 52.224 50.0736 93.184 113.9712 93.184 30.9248 0 58.4704-9.728 78.848-25.6 21.1968 33.9968 57.7536 56.6272 99.4304 56.6272l267.4688 0c44.3392 0 82.8416-17.408 114.3808-51.6096C904.704 758.3744 896.1024 496.7424 895.6928 486.912z"
              fill="#000"
              p-id="3624"
            ></path>
          </svg>
          <svg
            v-else
            t="1677204147051"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3623"
            width="28"
            height="28"
          >
            <path
              d="M759.1936 826.9824c-20.0704 21.9136-43.52 32.5632-71.4752 32.5632L420.2496 859.5456c-32.768 0-59.392-27.8528-59.392-62.0544L360.8576 468.2752c28.2624-29.9008 103.936-118.4768 147.0464-250.88 6.7584-20.7872 21.8112-55.5008 47.3088-52.8384 19.8656 1.9456 40.6528 24.4736 43.7248 47.104 1.8432 16.896-14.4384 115.5072-40.5504 167.6288L535.552 424.8576l241.152 0c32.768 0 59.392 27.8528 59.4944 63.2832C838.8608 556.2368 829.952 749.9776 759.1936 826.9824zM296.448 797.3888c0 14.336-23.7568 31.0272-54.4768 31.0272-30.72 0-54.4768-16.6912-54.4768-31.0272L187.4944 486.912c0-14.336 23.7568-31.0272 54.4768-31.0272 30.72 0 54.4768 16.6912 54.4768 31.0272L296.448 797.3888zM895.6928 486.912c0-68.5056-53.3504-124.2112-118.8864-124.2112L629.1456 362.7008c19.6608-59.6992 31.9488-134.4512 28.5696-159.6416-7.0656-51.6096-49.664-95.6416-96.9728-100.2496-22.6304-2.1504-79.1552 2.56-109.1584 94.72-37.9904 116.736-103.8336 195.8912-128.9216 223.1296-20.48-16.6912-48.8448-26.8288-80.6912-26.8288-63.8976 0-113.9712 40.96-113.9712 93.184l0 310.4768c0 52.224 50.0736 93.184 113.9712 93.184 30.9248 0 58.4704-9.728 78.848-25.6 21.1968 33.9968 57.7536 56.6272 99.4304 56.6272l267.4688 0c44.3392 0 82.8416-17.408 114.3808-51.6096C904.704 758.3744 896.1024 496.7424 895.6928 486.912z"
              fill="#ff0000"
              p-id="3624"
            ></path>
          </svg>
          <div class="num" :class="{ like: isLike }" style="margin-top: 2px">
            {{ likeNum | formatter }}
          </div>
        </div>
        <div class="doComment">
          <svg
            t="1677343044376"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6378"
            width="30"
            height="30"
          >
            <path
              d="M386.4576 450.6624m-40.96 0a40.96 40.96 0 1 0 81.92 0 40.96 40.96 0 1 0-81.92 0Z"
              p-id="6379"
              fill="#000"
            ></path>
            <path
              d="M512 450.6624m-40.96 0a40.96 40.96 0 1 0 81.92 0 40.96 40.96 0 1 0-81.92 0Z"
              p-id="6380"
              fill="#000"
            ></path>
            <path
              d="M637.5424 450.6624m-40.96 0a40.96 40.96 0 1 0 81.92 0 40.96 40.96 0 1 0-81.92 0Z"
              p-id="6381"
              fill="#000"
            ></path>
            <path
              d="M752.64 184.32H271.36c-47.9744 0-87.04 39.7824-87.04 88.6784v357.4784c0 48.896 39.0656 88.6784 87.04 88.6784h332.6976c0.9216 0 1.8432 0.3072 2.6112 0.8704l159.0272 111.36a45.5424 45.5424 0 0 0 47.2064 3.1744c15.4112-7.9872 25.0368-23.808 25.088-41.3696L839.68 273.1008v-0.1024c0-48.896-39.0656-88.6784-87.04-88.6784z m34.2016 599.3472l-150.784-105.6256a55.61344 55.61344 0 0 0-32-10.1376H271.36c-19.7632 0-35.84-16.7936-35.84-37.4784V272.9984c0-20.6848 16.0768-37.4784 35.84-37.4784h481.28c19.7632 0 35.84 16.7936 35.84 37.4272l-1.6384 510.72z"
              p-id="6382"
              fill="#000"
            ></path>
          </svg>
          <div class="num">
            {{ note.count.count_commented | formatter }}
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="show" position="bottom">
      <div class="box">
        <div class="left">
          <input
            v-model="commentText"
            type="text"
            placeholder="说说你的看法吧~"
          />
        </div>
        <div class="commentOk" @click.stop="commentOk">发送</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import CommentItem from "@/components/CommentItem.vue";
import { mapMutations } from "vuex";

export default {
  components: {
    CommentItem,
  },
  name: "NoteDetail",
  data() {
    return {
      property: "value",
      note: null,
      total: 0,
      isLike: false,
      likeNum: 0,
      comments: null,
      isFollow: false,
      show: false,
      commentText: "",
    };
  },
  created() {
    this.getNote();
    this.getComment();
  },
  methods: {
    back() {
      window.history.go(-1);
    },
    getNote() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.$axios
        .get(`https://apis.netstart.cn/xpc/note/${this.$route.query.id}`)
        .then((res) => {
          // console.log(res.data.data);
          this.note = res.data.data;
          this.total = this.note.count.count_commented;
          this.likeNum = this.note.count.count_liked;

          let id = this.note.user.id;
          if (localStorage.getItem("nsMine")) {
            let follows = JSON.parse(localStorage.getItem("follows") || "[]");
            if (follows.indexOf(id) != -1) {
              this.isFollow = true;
            }
          }
          this.$toast.clear();
        });
    },
    getComment() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.$axios
        .get(
          `https://apis.netstart.cn/xpc/note/${this.$route.query.id}/comment?offset=0&limit_size=10`
        )
        .then((res) => {
          this.comments = res.data.data;
          this.$toast.clear();
        });
    },
    ...mapMutations(["changeShare"]),
    share() {
      // console.log("share");
      this.changeShare();
    },
    follow() {
      let id = this.note.user.id;
      if (!localStorage.getItem("nsMine")) {
        this.$router.replace({ path: "/login" });
      } else {
        let follows = JSON.parse(localStorage.getItem("follows") || "[]");
        follows.unshift(id);
        localStorage.setItem("follows", JSON.stringify(follows));
        this.isFollow = true;
        this.$toast("关注成功");
      }
    },
    commentOk() {
      // console.log("commentOk");
      if (!this.commentText) {
        this.$toast("请输入评论内容");
      } else {
        let obj = {
          userId: "",
          contentText: "",
          createTimeUnix: 0,
          ipLocation: "",
          userDetail: {
            id: "",
            nickname: "",
            avatar_middle: "",
          },
        };
        obj.userId = "13525021";
        obj.contentText = this.commentText;
        obj.createTimeUnix = new Date().getTime();
        obj.ipLocation = "广东";
        obj.userDetail.id = "13525021";
        obj.userDetail.nickname = "手机用户2172";
        obj.userDetail.avatar_middle =
          "https://cs.xinpianchang.com/passport/default.jpg";
        this.comments.unshift(obj);
        this.show = false;
        this.$toast("发送成功");
      }
    },
  },
  filters: {
    timestampToTime: function (timestamp) {
      if (timestamp === 0 || timestamp == null) {
        return "";
      } else {
        var date = new Date(timestamp * 1000);
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        return Y + M + D;
      }
    },
    formatter: function (value) {
      if (value >= 1000 && value < 10000) {
        value = (value / 1000).toFixed(1) + "k";
      }
      if (value >= 10000 && value < 10000000) {
        value = (value / 10000).toFixed(1) + "w";
      }
      return value;
    },
    time: function (text) {
      let minute =
        Math.floor(text / 60) < 10
          ? `0${Math.floor(text / 60)}`
          : Math.floor(text / 60);
      let second = text % 60 < 10 ? `0${text % 60}` : text % 60;
      return `${minute}'${second}''`;
    },
  },
};
</script>

<style lang="scss" scoped>
.noteDetail {
  :deep(.van-image) {
    display: block !important;
  }

  header {
    height: 50px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    background-color: white;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;
      margin-left: 15px;

      .back {
        margin-right: 25px;
      }

      .author {
        display: flex;
        align-items: center;

        .avatar {
          margin-right: 8px;
          width: 30px;
          height: 30px;
          border-radius: 50%;
          border: 1px solid #f2f2f2;

          :deep(.van-image) {
            display: block;
          }
        }

        .username {
          font-size: 13px;
          font-weight: bold;
        }
      }
    }

    .right {
      margin-right: 15px;
      display: flex;
      align-items: center;

      .follow {
        height: 24px;
        line-height: 24px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: bold;
        color: red;
        border: 1px solid red;
        padding: 0 10px;
        margin-right: 25px;
      }

      .share {
        height: 20px;
      }
    }
  }

  .likeheader {
    height: 50px;
  }

  .index {
    // margin-bottom: 10px;
    padding: 15px;
    border-bottom: 1px solid #f2f2f2;

    .images {
      display: flex;
      //   justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      position: relative;
      margin-bottom: 10px;

      .image {
        margin-right: 5.5px;
        margin-bottom: 5.5px;

        // :deep(.van-image) {
        //   display: block !important;
        // }
      }

      .image:nth-of-type(3n) {
        margin-right: 0;
      }
    }

    .title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 3px;
    }

    .content {
      white-space: pre-wrap;
      font-size: 14px;
    }

    .topics {
      color: cornflowerblue;
      font-size: 14px;
    }

    .article {
      display: flex;
      align-items: center;
      background-color: #f3f6f6;
      border-radius: 10px;
      margin-top: 10px;

      .left {
        width: 50%;
        margin-right: 10px;
        flex-shrink: 0;
        position: relative;

        .countBox {
          position: absolute;
          bottom: 10px;
          left: 0;
          width: 86%;
          padding: 0 7%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          > div {
            font-size: 12px;
            color: white;
            display: flex;
            align-items: center;

            span {
              margin-left: 5px;
            }
          }
        }
      }

      .right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-right: 10px;

        .r-title {
          font-size: 15px;
          margin-bottom: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          /*! autoprefixer: off */
          -webkit-box-orient: vertical;
          /* autoprefixer: on */
        }

        .username {
          font-size: 13px;
          color: #999;
        }
      }
    }

    .sub {
      margin-top: 10px;
      color: #999;
      font-size: 12px;
    }
  }

  .commectBox {
    padding: 15px;
    padding-bottom: 0;

    .total {
      font-size: 16px;
      margin-bottom: 10px;
      color: #999;
    }

    .doComment {
      display: flex;
      align-items: center;

      .avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid #f2f2f2;
        margin-right: 8px;
        flex-shrink: 0;
      }

      .fakeInput {
        width: 100%;
        height: 32px;
        line-height: 32px;
        border-radius: 16px;
        background-color: #f2f2f2;

        span {
          font-size: 14px;
          color: #999;
          margin-left: 15px;
        }
      }
    }
  }

  .likebottom {
    height: 50px;
  }

  .bottom {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    background-color: white;
    border-top: 1px solid #f2f2f2;

    .fakeInput {
      width: 200px;
      height: 32px;
      line-height: 32px;
      border-radius: 16px;
      background-color: #f2f2f2;
      margin-left: 15px;

      span {
        font-size: 14px;
        color: #999;
        margin-left: 15px;
      }
    }

    .right {
      display: flex;
      align-items: center;

      > div {
        margin-right: 15px;
        display: flex;
        align-items: center;

        .num {
          font-size: 16px;
          margin-left: 4px;
        }

        .text {
          margin-left: 4px;
          font-size: 14px;
        }

        .like {
          color: red;
        }
      }
    }
  }

  .box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    width: 100%;

    .left {
      background-color: #f2f2f2;
      height: 36px;
      border-radius: 18px;
      margin-left: 15px;
      display: flex;
      align-items: center;
      width: 70%;

      input {
        margin-left: 15px;
        background: none;
        outline: none;
        // border: 1px solid #ccc;
        border: none;
        padding: 0;
        font-size: 14px;
        color: #999;
      }

      input:focus {
        border: none;
      }
    }

    .commentOk {
      margin-right: 15px;
      height: 40px;
      line-height: 40px;
      border-radius: 20px;
      padding: 0 20px;
      background-color: red;
      color: white;
      font-size: 16px;
      font-weight: bold;
    }
  }
}
</style>
